<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询显示所有的菜单表格数据</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/common.js"></script>
		<script src="./js/vue.js"></script>
		<script src="./js/asiox.js"></script>
		<script src="./js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> -->
			
			<template>
				 <el-input placeholder="请输入内容" v-model="input" style="width: 300px;">
				       <el-button slot="append" icon="el-icon-search" @click="init"></el-button>

				  </el-input>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="label" label="菜单标题" width="180">
					</el-table-column>
					<el-table-column prop="href" label="连接地址" width="180">
					</el-table-column>
					<el-table-column prop="iconcls" label="图标" width="180">

					</el-table-column>
					</el-table-column>
					<el-table-column label="操作">
						<template slot="header" slot-scope="scope">
							<!-- 操作 -->
							<el-button type="primary" size="mini" @click="add(scope.$index, scope.row)">新增</el-button>
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 新增/修改 -->
			<el-dialog :title="msg" :visible.sync="dialogFormVisibleAdd">

				<el-form :model="fromadd">
					<el-form-item label="菜单标题:" prop="label" :label-width="formLabelWidth">
						<el-input v-model="fromadd.label" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜单地址:" prop="href" :label-width="formLabelWidth">
						<!-- 格式:xxxx.html -->
						<el-input v-model="fromadd.href" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="菜   单log图:" prop="iconcls" :label-width="formLabelWidth">
						<i :class="fromadd.iconcls"></i>
						<el-select v-model="fromadd.iconcls" placeholder="请选择图标">
							<el-option value="请选择">请选择</el-option>
							<el-option v-for="item in imgiconptions" :key="item" :label="item" :value="item">
								<i :class="item"></i>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属父级:" prop="parentid" :label-width="formLabelWidth">
						<el-cascader :options="parentidoptions" :show-all-levels="false" :props="parenridProps"
							vlaue="fromadd.parentid" v-model="fromadd.parentid" clearable></el-cascader>
						<!-- 	<el-cascader :props="parenridProps" :show-all-levels="false" v-model="fromadd.parentid"
							:options="parentidoptions" clearable></el-cascader> -->
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>

		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#app",
		data: {
			imgiconptions: ["el-icon-light-rain", "el-icon-lightning", "el-icon-sunrise",
				"el-icon-sunny", "el-icon-moon-night"
			],
			parenridProps: { //配置父级菜单cascader
				value: "menuid",
				emitPath: false,
				checkStrictly: true
			},
			tableData: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			dialogFormVisibleAdd: false, //控制增加菜单的dialog显示
			msg: "新增菜单",
			fromadd: {
				menuid: "",
				label: "",
				href: "",
				parentid: 0,
				iconcls: ""
			},
			formLabelWidth: "120px",
			parentidoptions: [], //父级菜单集合数据
			bot: true,
			input:"",
			

		},
		methods: {
			
			//增加提交
			addsubmit() {
				console.log(this.fromadd)
				// alert(JSON.stringify(this.fromadd))
				// alert(this.fromadd.parentid)
				if (this.bot) {
					axios.post(API + "insertMenuOne", {
						menuid: 0,
						label: this.fromadd.label,
						href: this.fromadd.href,
						parentid: this.fromadd.parentid,
						iconcls: this.fromadd.iconcls
					}).then((res) => {
						console.log(res);
						alert(res.data)
						this.init()
						this.fromadd = {}
						this.dialogFormVisibleAdd = false
					})
				} else {
					// this.$refs.menuinfoupdate.validate((valid) => {
					// 				if (valid) {
					// alert(JSON.stringify(this.fromadd))

					axios.post(API + "updateMenuOne", {
						menuid: this.fromadd.menuid,
						label: this.fromadd.label,
						href: this.fromadd.href,
						parentid: this.fromadd.parentid,
						iconcls: this.fromadd.iconcls
					}).then((res) => {
						console.log(res);
						alert(res.data)
						this.init()
						this.fromadd = {}
						this.dialogFormVisibleAdd = false
					})
				}
				// })
				// 	}

			},
			//获取所有的菜单集合
			selAll() {
				axios.get(API + "selectListAll").then((res) => {
					console.log(res.data.data.menuinfos);
					let s = arrayToTree(res.data.data.menuinfos)
					this.parentidoptions = s
				}).catch(err => {
					console.log(err);
				})
			},
			//新增按钮的显示操作
			add() {
				this.selAll()
				this.bot = true;
				this.dialogFormVisibleAdd = true
			},
			//编辑
			handleEdit(index, row) {
				// alert(JSON.stringify(row))
				this.$confirm('请确定是删除还是修改', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '删除',
						cancelButtonText: '修改'
					})
					.then(() => {
						console.log(row);
						if (row.parentid == 0) {
							axios.get(API + "deleteMenuOne?id=" + row.menuid).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.dialogFormVisibleAdd = false
							})
						} else {
							// alert(row.menuid)
							axios.get(API + "deleteMenuTwo?id=" + row.menuid).then((res) => {
								console.log(res);
								alert(res.data)
								this.init()
								this.dialogFormVisibleAdd = false
							})
						}

					}).catch(action => {
						this.selAll()
						this.msg = "修改菜单"
						this.fromadd = {
							menuid: row.menuid,
							label: row.label,
							href: row.href,
							parentid: row.parentid,
							iconcls: row.iconcls
						}
						this.bot = false
						this.dialogFormVisibleAdd = true
					});

			},
			init() {
				// alert(this.token)
				axios.get(API + "selectListAll?label="+this.input).then((res) => {
					console.log(res.data.data.menuinfos);
					this.tableData = res.data.data.menuinfos
					console.log(this.tableData);
				}).catch(err => {
					console.log(err);
				})
			}
		},
		mounted() {
			this.init()
		}
	})
</script>